<!DOCTYPE html>
<html>
<head>
	<link href="../demoengine/demoengine.min.css" rel="stylesheet">
	<script src="../demoengine/demoengine.min.js" defer></script>
	<title>jQuery UI Dialog: Size to Fit Content</title>
	<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
</head>
<body>
	<div id="dialog" title="Dialog"></div>
	<ul>
		<li><a href="photo-1.jpg" class="dialogify" data-width="450" data-height="300">Dialogify Photo 1</a></li>
		<li><a href="photo-2.jpg" class="dialogify" data-width="300" data-height="400">Dialogify Photo 2</a></li>
	</ul>
	<script>
		/*
		 * jQuery UI Dialog: Size to Fit Content
		 * http://salman-w.blogspot.com/2013/05/jquery-ui-dialog-examples.html
		 */
		$(function() {
			$("#dialog").dialog({
				autoOpen: false,
				resizable: false,
				width: "auto"
			});
			$(".dialogify").on("click", function(e) {
				e.preventDefault();
				$("#dialog").html("<img src='" + $(this).prop("href") + "' width='" + $(this).attr("data-width") + "' height='" + $(this).attr("data-height") + "'>");
				$("#dialog").dialog("option", "position", {
					my: "center",
					at: "center",
					of: window
				});
				if ($("#dialog").dialog("isOpen") == false) {
					$("#dialog").dialog("open");
				}
			});
		});
	</script>
</body>
</html>
